<template>
<div class="tmpl">
    <h4>{{photoinfo.title}}</h4>
    <hr>
    <p>
        <span>发表时间：{{photoinfo.add_time | dataFormat}}</span>
        <span>点击次数：{{photoinfo.click}}</span>
    </p>
    <div class="thumb">
        <img class="preview-img" v-for="(item, index) in list"
         :key="index" :src="item.src" height="100" @click="$preview.open(index, list)">
    </div>
    <div v-html="photoinfo.content" class="content"></div>
    <comment :artId="id"></comment>
</div>
</template>
<script>
import comment from '../subcomm/comm.vue'
import config from '../../js/globalConfig.js'
export default {
  data(){
      return{
          id:this.$route.params.id,
          photoinfo:{},
          list:[]
      }
  },
  created(){
this.getInfo()
this.getThumb();
  },
  methods:{
      getInfo(){
          this.$http.get('api/getimageInfo/'+this.id).then(res=>{
              if(res.body.status==0){
                  this.photoinfo=res.body.message[0]

              }else{
                  console.log('获取图片详情失败')
              }
          })
      },
      getThumb(){
          this.$http.get('api/getthumimages/'+this.id).then(res=>{
              if(res.body.status==0){
                res.body.message.forEach(item=>{
                      item.w=600;
                      item.h=400;
                      item.src=config.imgBaseURL+item.src;
                      
                  })
                  this.list=res.body.message

              }else{
                  console.log('获取缩略图失败')
              }

          })
      }
  },
  components:{comment}
}
</script>
<style lang="scss" scoped>
.tmpl{
    padding:3px;
    h4{
        color:#2AF;
        text-align:center;
        font-size:16px;
        
    }
    p{
        color:#2AF;
        font-size:12px;
        display: flex;
        justify-content: space-between;
    }
    div{
        font-size:14px;
        text-indent: 1em;

    }
    .thumb{
       display: flex;
       flex-wrap:wrap;
       justify-content: space-around;
       img{
           margin-bottom:10px;
       }
    }
}

</style>

